<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
  </div>
</template>
<script>
import formatter, { typeMap } from '@/utils/format'
import TableSearch from '@/components/TableSearch'
import { selectApply, deleteApply } from '@/api/user'
import dayjs from 'dayjs'

const merchantType = {
  ANOTHER: '其他运营方',
  CMCC: '中国移动',
  CTT: '中国铁通',
}

export default {
  name: 'UserApplyReviewList',
  components: { TableSearch },
  data() {
    return {
      loading: false,
      tableBtns: [],
      searchPath: '/web/user-management/verify-management/搜索',
      formItemsInline: [
        {
          placeholder: '商户名称',
          type: 'text',
          value: 'userName',
          clearable: true,
          resourceId: '/web/user-management/verify-management/商户名称',
        },
        {
          placeholder: '手机号',
          type: 'text',
          value: 'mobile',
          clearable: true,
          resourceId: '/web/user-management/verify-management/手机号',
        },
        {
          placeholder: '申请方式',
          type: 'select',
          options: typeMap.selectOptions([], 'applyType'),
          value: 'applyType',
          clearable: true,
          resourceId: '/web/user-management/verify-management/申请方式',
        },
        {
          placeholder: '状态',
          type: 'select',
          options: typeMap.selectOptions([], 'applyStatus'),
          value: 'approval',
          clearable: true,
          resourceId: '/web/user-management/verify-management/状态',
        },
      ],
      columns: [
        {
          label: '商户名称',
          prop: 'userName',
          resourceId: '/web/user-management/verify-management/商户名称',
        },
        {
          label: '手机号',
          prop: 'mobile',
          resourceId: '/web/user-management/verify-management/手机号',
        },
        {
          label: '管理员姓名',
          prop: 'name',
          resourceId: '/web/user-management/verify-management/管理员姓名',
        },
        {
          label: '申请方式',
          prop: 'applyType',
          formatter,
          resourceId: '/web/user-management/verify-management/申请方式',
        },
        {
          label: '申请时间',
          prop: 'createTime',
          formatter,
          resourceId: '/web/user-management/verify-management/申请时间',
        },
        {
          label: '审核时间',
          prop: 'approvalTime',
          formatter: (row) => {
            if (row.approvalTime) {
              return dayjs(row.approvalTime).format('YYYY-MM-DD HH:mm:ss')
            }

            return '--'
          },
          resourceId: '/web/user-management/verify-management/审核时间',
        },
        {
          label: '商户属性',
          prop: 'merchantType',
          formatter: (item) => {
            return merchantType[item.merchantType] || '-'
          },
          resourceId: '/web/user-management/verify-management/商户属性',
        },
        {
          label: '状态',
          prop: 'approval',
          formatter: (item) => {
            return typeMap.applyStatus[item.approval] || '-'
          },
          resourceId: '/web/user-management/verify-management/状态',
        },
        {
          label: '操作',
          resourceId: '/web/user-management/verify-management/操作',
          buttons: [
            {
              label: '查看',
              resourceId: '/web/user-management/verify-management/查看',
              click: (row) => {
                this.$router.push(`/user/applyReviewManage/${row.id}`)
              },
            },
            {
              label: '删除',
              class: 'table-button-red',
              resourceId: '/web/user-management/verify-management/删除',
              click: (row) => {
                this.$confirm('确定要删除这条审核信息吗', '提示', {
                  center: true,
                  customClass: 'tip-dialog__wrapper',
                }).then(() => {
                  deleteApply({
                    id: row.id,
                  }).then(() => {
                    this.$message({
                      type: 'success',
                      showClose: true,
                      message: '删除成功',
                    })

                    this.$refs.tableSearch.refreshTable()
                  })
                })
              },
              disabled: (row) => {
                return row.approval !== 'REFUSE'
              },
            },
          ],
        },
      ],
      tableData: {},
      form: {},
    }
  },
  methods: {
    handleTableData(params) {
      this.loading = true
      selectApply(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
  },
}
</script>
